<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="x1" id="x1">2222</div>
    <p>2233</p>
    <span class="x1">3333</span>
    <script>
        var x1 = document.getElementById('x1')
        var x2 = document.getElementsByClassName('x1')
        var x3 = document.getElementsByTagName('p')

        console.log(document.querySelector('#x1'))
        console.log(document.querySelector('.x1'))
        console.log(document.querySelector('p'))

        console.log(document.querySelectorAll('#x1'))
        console.log(document.querySelectorAll('.x1'))
        console.log(document.querySelectorAll('p'))
    </script>
</body>
</html>